<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-06 09:34:50
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-03-17 11:19:26
 * @FilePath: \cxl-h5\src\pages\404\Index.vue
-->
<template>
    <section class="no-found">
        <h1>404</h1>
        <h2>哦豁，页面不见了！</h2>
        <h3>肯定是你地址输入错了！</h3>
        <h4>请好好的检查一下！</h4>
        <p>{{ count }} 秒后返回主页</p>
        <p @click="onOpenHome" class="now">立即返回</p>
    </section>
</template>
<script setup lang="ts">
import useWeixinSdk from '@/utils/WXSdk'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
//初始化路由对象
const router = useRouter()
//设置 5 秒倒计时
const count = ref(10)

let timer = setInterval(() => {
    count.value--
    if (count.value === 1) {
        router.replace('/index')
        clearInterval(timer)
    }
}, 1000)

const onOpenHome = () => {
    clearInterval(timer)
    router.replace('/index')
    useWeixinSdk.disableShare()
}
</script>
<style scoped lang="scss">
.no-found {
    text-align: center;
    h1 {
        font-size: 8rem;
        margin: 4rem 0 2rem 0;
    }
    p {
        font-size: var(--cxl-size-12);
        margin: 2rem 0;
    }
    .now {
        color: #1b045a;
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
